<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!DOCTYPE HTML>
<html>

	<head>
	    <c:set var="title" value="购物商城" scope="request" />
		<%-- <jsp:include page="/head.jsp" /> --%>
		<link href="shop/css/shop-detail.css" rel="stylesheet" /> 
		<link href="shop/css/shop-footer.css" rel="stylesheet" />
		<link href="shop/css/shop-lunbo.css" rel="stylesheet" />
		<link href="shop/css/shop-common.css" rel="stylesheet" />
		<!-- 轮播css -->
		<jsp:include page="/head.jsp" />
		<link href="shop/css/shop-top.css" rel="stylesheet" />
		<script type="text/javascript" src="shop/js/shop-jquery.lazyload.min.js"></script>
		<script type="text/javascript" src="shop/js/shop-public.js"></script>
		<script type="text/javascript">
			//$.get("")
		
		</script>
	</head>

	<body>
	<c:import url="/news-class.do?mb=header" /> 
		<%@ include file="jsps/top.jsp"  %>
		<div class="yershop_wrapper">
			<%@ include file="jsps/hader.jsp" %>
			<!-- /头部 -->
			<!-- 主体 -->
			<div class="common_wrapper">
				<!--container begin-->
				<div class="flexcontainer">
					<!--menu begin-->
					<div class="nav-wrap">
						<!--fenlei begin-->
						<div style="position: relative;" class="nava">
							<div style="width:190px; height:40px; display: inline-block;"id="goods">
								<div>
									<h2 style="margin: 0; width: 190px; ">
									<span class="grid"><img src="img/_noimg.png" /></span> <span style="font-size:18px; height: 100%; top:10px; position:absolute; color:#FFFFFF; padding: 5px 10px 10px 0px ;">商品分类<b style="position: absolute; left: 95px; "></b></span>
								</h2>
								</div>
								<div style="position: absolute;left:10px;" class="all-goods" id="all-goods">
									<%-- <c:forEach items="${productclass}" var="product"> --%>
									<c:forEach items="${pands}" var="pands" varStatus="pan">
										<div class="item">
											<div class="product">
												<h4>
												<%-- <a href="shop.html#lou">${product.productClassName}</a> --%>
												<c:if test="${pands.productClassId==1}">
													<a href="shop.html#lou1">${pands.productClassName}</a>
												</c:if>
												<c:if test="${pands.productClassId==2}">
													<a href="shop.html#lou2">${pands.productClassName}</a>
												</c:if>
												<c:if test="${pands.productClassId==3}">
													<a href="shop.html#lou3">${pands.productClassName}</a>
												</c:if>
												<c:if test="${pands.productClassId==4}">
													<a href="shop.html#lou4">${pands.productClassName}</a>
												</c:if>
												<c:if test="${pands.productClassId==5}">
													<a href="shop.html#lou5">${pands.productClassName}</a>
												</c:if>
												<c:if test="${pands.productClassId==6}">
													<a href="shop.html#lou6">${pands.productClassName}</a>
												</c:if>
												<c:if test="${pands.productClassId==7}">
													<a href="shop.html#lou7">${pands.productClassName}</a>
												</c:if>
												<c:if test="${pands.productClassId==8}">
													<a href="shop.html#lou8">${pands.productClassName}</a>
												</c:if>
												<c:if test="${pands.productClassId==9}">
													<a href="shop.html#lou9">${pands.productClassName}</a>
												</c:if>
												</h4>
											</div>
										</div>
									</c:forEach>
								</div>
							</div>
							
							
							<!--fenlei over-->
							<ul style="padding-left:0; position: absolute;left: 240px; top: 0; " class="menu">
								<li>
									<a href="#" target="_self">首页</a>
								</li>
								<li>
									<a href="#" target="_blank">团购</a>
								</li>
								<li>
									<a href="#" target="_self">抢购</a>
								</li>
								<li>
									<a href="#" target="_self">预约</a>
								</li>
							</ul>
						</div>
						<script>
							$(".menu-list li").eq(0).css('background', '#474747');
						</script>
						<!--首页高亮-->
					</div>
					<!--menu over-->
					<!--pic begin-->
					
					
					
					<div class="screen">
						<div class="ck-slide">
							<ul class="ck-slide-wrapper" style="width: 5050px; margin-left: -4040px;">
										<c:forEach items="${shopSlide}" var="shopSlide">
											<li style="float: left; position: relative;">
												<a href="${shopSlide.shopSlideUrl}" target="_blank"> <img src="${shopSlide.shopSlidePicture}"></a>
											</li>
										</c:forEach>
									</ul>
									<a href="javascript:;" class="ctrl-slide ck-prev">上一张</a>
									<a href="javascript:;" class="ctrl-slide ck-next">下一张</a>
									<div class="ck-slidebox">
										<div class="slideWrap">
											<ul class="dot-wrap">
												<li class="current"><em>1</em></li>
												<li><em>2</em></li>
												<li><em>3</em></li>
												<li><em>4</em></li>
												<li><em>5</em></li>
											</ul>
										</div>
									</div>
							</div>
						
						
						<script type="text/javascript" src="shop/js/shop-slide.js"></script>
						<!-- 轮播js -->
						
						 
						<script>
							$('.ck-slide').ckSlide({
								dir: 'x', //左右滚动
								autoPlay: true
							});
						</script>
						<script type="text/javascript" language="javascript">
							var PicTotal = 5;
							var CurrentIndex;
							var ToDisplayPicNumber = 0;
							$("div.LunBo div.LunBoNum span").click(DisplayPic);

							function DisplayPic() {
								// 测试是父亲的第几个儿子
								CurrentIndex = $(this).index();
								// 删除所有同级兄弟的类属性
								$(this).parent().children().removeClass("CurrentNum")
								// 为当前元素添加类
								$(this).addClass("CurrentNum");
								// 隐藏全部图片
								var Pic = $(this).parent().parent().children("ul");
								$(Pic).children().hide();
								// 显示指定图片
								$(Pic).children("li").eq(CurrentIndex).show();
							}

							function PicNumClick() {
								$("div.LunBo div.LunBoNum span").eq(ToDisplayPicNumber).trigger("click");
								ToDisplayPicNumber = (ToDisplayPicNumber + 1) % PicTotal;
								setTimeout("PicNumClick()", 3000);
							}
							setTimeout("PicNumClick()", 3000);
						</script> 
						
						
						
					</div>
					
					<!--screen over-->
				</div>
				<!--flexcontainer over-->
				<!-- 楼层循环go -->
				
				<c:forEach items="${pands}" var="pands" varStatus="pan">
					<div class="list">
					
					<%-- <a name="lou" href="shop.html?productClassName=${pan.index+1 }F">
						<h3>
							<span class="floor">${pan.index+1 }F</span><span>${pands.productClassName }</span>
						</h3>
					</a> --%>
					
					<c:if test="${pands.productClassId==1}">
					<a name="lou1" href="shop.html?productClassName=${pan.index+1 }F">
						<h3>
							<span class="floor">${pan.index+1 }F</span><span>${pands.productClassName }</span>
						</h3>
					</a>
					</c:if>
					<c:if test="${pands.productClassId==2}">
					<a name="lou2" href="shop.html?productClassName=${pan.index+1 }F">
						<h3>
							<span class="floor">${pan.index+1 }F</span><span>${pands.productClassName }</span>
						</h3>
					</a>
					</c:if>
					<c:if test="${pands.productClassId==3}">
					<a name="lou3" href="shop.html?productClassName=${pan.index+1 }F">
						<h3>
							<span class="floor">${pan.index+1 }F</span><span>${pands.productClassName }</span>
						</h3>
					</a>
					</c:if>
					<c:if test="${pands.productClassId==4}">
					<a name="lou4" href="shop.html?productClassName=${pan.index+1 }F">
						<h3>
							<span class="floor">${pan.index+1 }F</span><span>${pands.productClassName }</span>
						</h3>
					</a>
					</c:if>
					<c:if test="${pands.productClassId==5}">
					<a name="lou5" href="shop.html?productClassName=${pan.index+1 }F">
						<h3>
							<span class="floor">${pan.index+1 }F</span><span>${pands.productClassName }</span>
						</h3>
					</a>
					</c:if>
					<c:if test="${pands.productClassId==6}">
					<a name="lou6" href="shop.html?productClassName=${pan.index+1 }F">
						<h3>
							<span class="floor">${pan.index+1 }F</span><span>${pands.productClassName }</span>
						</h3>
					</a>
					</c:if>
					<c:if test="${pands.productClassId==7}">
					<a name="lou7" href="shop.html?productClassName=${pan.index+1 }F">
						<h3>
							<span class="floor">${pan.index+1 }F</span><span>${pands.productClassName }</span>
						</h3>
					</a>
					</c:if>
					<c:if test="${pands.productClassId==8}">
					<a name="lou8" href="shop.html?productClassName=${pan.index+1 }F">
						<h3>
							<span class="floor">${pan.index+1 }F</span><span>${pands.productClassName }</span>
						</h3>
					</a>
					</c:if>
					<c:if test="${pands.productClassId==9}">
					<a name="lou9" href="shop.html?productClassName=${pan.index+1 }F">
						<h3>
							<span class="floor">${pan.index+1 }F</span><span>${pands.productClassName }</span>
						</h3>
					</a>
					</c:if>
					
						<div class="category">
							<!--栏目推荐位调用结束-->
							<!--栏目文章调用开始-->
							<ul class="article" id="list_52">
								<!-- 循环展示商品go -->
								<c:forEach items="${pands.searchs }" var="searchs">
									<li>
										<div class="pic">
											<a class="yershop_img" href="shopgoods-1.do?productId=${searchs.productId }" target="_blank" title="${searchs.productName} "> <img class="lazy" src="img/_noimg.png" data-original="${searchs.productImgs }"><em></em></a>
										</div>
										<div class="name">
											<a href="shopgoods-1.do?productId=${searchs.productId }" target="_blank" title="${searchs.productName}">${searchs.productName}</a>
										</div>
										<div class="price">
											<font>￥</font> <span>${searchs.productPrice1}</span> <span></span>
										</div>
									</li>	
								</c:forEach>
								<!-- 循环展示商品end -->
							</ul>
						</div>
						<!--栏目文章调用结束-->
					</div>
				</c:forEach>
				
								
				
			</div>
			<!-- /主体 -->
			<!-- 购物车js -->
			<script>
				//购物车显示与隐藏
				var Shopcart = document.getElementById('shopping_cart');
				var Goodsmenu = document.getElementById('goods');
				var timerr = null; //定义定时器变量
				//鼠标移入div1或div2都把定时器关闭了，不让他消失
				Shopcart.onmouseover = Goodsmenu.onmouseover = function() {
					Goodsmenu.style.display = 'block';
					clearTimeout(timerr);
				}
				//鼠标移出div1或div2都重新开定时器，让他延时消失
				Shopcart.onmouseout = Goodsmenu.onmouseout = function() {
					//开定时器
					timerr = setTimeout(function() {
						Goodsmenu.style.display = 'none';
					}, 10);
				}

				//购物车动态删除
				function delcommon(event) { //获取事件源
					event = event ? event : window.event;
					var obj = event.srcElement ? event.srcElement : event.target;
					//这时obj就是触发事件的对象，可以使用它的各个属性 
					//还可以将obj转换成jquery对象，方便选用其他元素 
					str = obj.innerHTML.replace(/<\/?[^>]*>/g, ''); //去除HTML tag

					var $obj = $(obj);
					var str = $obj.parent().prev().html();
					if(obj.rel == "del") {
						var str = obj.name;
						var uexist = "";
						//全选的实现 定义删的发送路径
						if(uexist) {
							var del = '/index.php?s=/Home/Shopcart/delItemByuid.html';
						} else {
							var del = 'delShoppingCart.goods';

						}

						$.ajax({
							type: 'post', //传送的方式,get/post
							url: del, //发送数据的地址
							data: {
								sort: str
							},
							dataType: "json",
							success: function(data) {
								var $obj = $(obj);
								$obj.parents("li").remove();
								if(data.sum == "0") { //判断购物车数量是否为0，为0则隐藏底部查看工具
									$("div.sc_goods_foot").hide();
									var html = '<p class="sc_goods_none" >您的购物车还是空的，赶紧行动吧！</p>';
									$("ul.sc_goods_ul").html(html);

								} else {
									$("div.sc_goods_foot").show();
								}

							},
							error: function(event, XMLHttpRequest, ajaxOptions, thrownError) {
								alert(XMLHttpRequest + thrownError);
							}
						})
					}

				}
				//购物车删除结束
				//图片延时加载开启
				$('img.lazy').lazyload({
					effect: 'fadeIn'
				});
			</script>
			<!-- 购物车js -->
			<!-- 底部 -->
			<!-- 底部-->
			<script type="text/javascript" charset="utf-8" src="shop/js/shop-menudown.js"></script>
		</div>
		<%@ include file="jsps/footer.jsp" %>
		<!-- /底部 -->
	</body>

</html>
